<template>
  <div>
    <div class="header">
      <header>
        <div class="header_return" @click="clickReturn">
          <img src="../assets/return.png" alt />
        </div>
        <div class="header_name">{{name}}</div>
        <div class="header_btn" v-if="btn" @click="btnClick">{{btn}}</div>
      </header>
    </div>
    <div class="zhan"></div>
  </div>
</template>
<script>
export default {
  name: "headers",
  props: {
    name: {
      type:String,
      default:''
    },
    btn: {
      type:String,
      default:''
    },
  },
  data() { //数据
    return {

    }
  },
  mounted() {
    
  },  
  created() {

  },
  methods: {
    clickReturn() {
      this._events.returnClick ? this.$emit('returnClick') : this.$router.back();
    },
    btnClick() {
      this.$emit('btnClick');
    },
  },
  components: {

  },
};
</script>
<style scoped lang="less">
.zhan {
  height: 88px;
}
/*导航栏*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
}

.header header {
  width: 100%;
  height: 88px;
  display: flex;
  padding: 0 30px;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  top: 0;
  left: 0;
  font-size: 32px;
  color: #333;
  font-weight: 900;
}

.header_return {
  width: 25px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 30px;
  display: flex;
  align-items: center;
}

.header_return > img {
  width: 25px;
  height: 44px;
}

.header_btn {
  position: absolute;
  top: 0;
  right: 30px;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 30px;
  color: @vue_base_color;
  font-weight: 900;
}
</style>